<template>
	<div style="font-family: '微软雅黑';">
		<div class="head">
			<a @click="$router.push({path: '/'})" class="return"></a>
			<span>{{$t('NewsList.v1')}}</span>
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<div class="news">
					<van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text=" " :loosing-text="$t('MyTeam.v8')" :loading-text="$t('MyTeam.v7')">
						<van-list v-model="loading" :finished="finished" :finished-text="$t('NewsList.v2')" :loading-text="$t('MyTeam.v7')" @load="onLoad">
							<div v-for="item,index of newsList" :key="item.id">
								<van-panel :title="item.title" :desc="item.createTime | dateFormat" @click="toNewsDetails(item.id)">

								</van-panel>
							</div>
						</van-list>
					</van-pull-refresh>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { dateFormat } from 'vux';
	import { home } from './../utils/api';
	export default {
		data() {
			return {
				newsList: [], //公告列表
				size: 10, //每页数量
				total: '', //总数量
				listLength: '', //当前总数量
				isLoading: false,
				finished: false,
				loading: false
			}
		},
		mounted() {

		},
		methods: {
			toNewsDetails(id) {
				this.$router.push({
					name: 'NewsDetails',
					query: {
						id: id
					}
				})
			},
			List() {
				home.getNotices({
					current: 1,
					size: this.size
				}).then(res => {
					if(res.code == 200) {
						this.newsList = res.data.records;
						this.listLength = res.data.records.length;
						this.total = res.data.total;
					}
				})
			},
			onRefresh() { // 下拉刷新
				this.List()
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading = false;
				}, 500);
			},
			onLoad() { // 上拉加载
				this.List()
				// 异步更新数据
				setTimeout(() => {
					if(this.total > this.listLength) {
						this.size += 10;
						this.loading = false;
					} else {
						// 加载状态结束
						this.finished = true;
						this.loading = false;
					}
				}, 500);
			}
		},
		filters: {
		    dateFormat
		}
	}
</script>

<style scoped lang="less">
	.head~.overlay {
		top: 45px;
	}

	.van-cell {
		color: #FFFFFF;
	}

	.van-cell:not(:last-child)::after {
		border-bottom: 1px solid #262b3f;
		left:0;
	}

	.van-hairline--top-bottom::after {
		border-color: #1a2e58;
	}

	.tx .van-panel__header-value {
		color: #00dd94;
	}
</style>
